<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		
		<view class="login-box">
			<view class="title">添加约课用户</view>
			<view class="form">
				<view class="form-item">
					<u-icon name="account-fill" :color="(form.name === '' && clicked) ? '#ff0000' : '#444444'" size="40"></u-icon>
					<input class="input" :class="{'inputNullStyle': (form.name === '' && clicked)}" placeholder="昵称/姓名"  v-model="form.name"/>
				</view>
				<view class="form-item">
					<u-icon name="phone-fill" :color="(form.tel === '' && clicked) ? '#ff0000' : '#444444'" size="40"></u-icon>
					<input class="input" :class="{'inputNullStyle': (form.tel === '' && clicked)}" placeholder="手机号" v-model="form.tel"/>
				</view>
				
				<view class="btn" @click="addUserLogin">确认添加</view>
			</view>
		</view>
	</view>
</template>

<script>
	import form from 'uview-ui/libs/config/props/form'
	
	const memberCloud = uniCloud.importObject('member')
	const teacherCloud = uniCloud.importObject('teacher')
	export default {
		data() {
			return {
				form: {
					// id: '',
					name: '孙韦正',
					tel: '18814005892'
				},
				clicked: false
			}
		},
		methods: {
			validForm() {
				const form = this.form
				// const ignore = ['id']
				for (let item in form) {
					// if (ignore.indexOf(item) !== -1) {
					// 	continue
					// }
					
					if (form[item] === '') {
						return false
					}
				}
				
				if (form.tel.length !== 11) {
					this.showUToast({
						message: '手机号格式有误',
						type: 'error'
					})
					return false
				}
				return true
			},
			showUToast({message, type}) {
				this.$refs.uToast.show({
					position: 'top',
					duration: 1000,
					message,
					type
				})
			},
			setStoreToSwitch(data) {
				uni.setStorageSync('user',{
					id: data._id,
					name: data.name,
					tel: data.tel,
					identity: data.identity
				})
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			addUserLogin() {
				this.clicked = true
				if (this.validForm()) {
					// 会员登录
					memberCloud.getByInfo({...this.form}).then(({data}) => {
						if (data[0]) {
							this.setStoreToSwitch(data[0])
						} else{
							// 会员登录不上改为老师登录
							teacherCloud.getTeacherInfo({
								name: this.form.name,
								tel: this.form.tel
							}).then(({data}) => {
								if (data[0]) {
									this.setStoreToSwitch(data[0])
								} else {
									// 登录失败
									this.showUToast({
										message: '登录失败',
										type: 'error'
									})
								}
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">

	.login-box{
		padding: 100rpx;
		
		.title{
			text-align: center;
			font-size: 40rpx;
			font-weight: 600;
		}
		
		.form-item{
			display: flex;
			justify-content: space-between;
		}
		
		.input{
			flex-grow: 2;
			margin: 30rpx 10rpx;
			padding: 10rpx;
			border-bottom: 1px solid rgb(191, 191, 191);
		}
		
		.btn{
			text-align: center;
			margin: 60rpx 10rpx 0;
			padding: 10rpx;
			background-color: #444444;
			color: #fff;
		}
	}
	
	.inputNullStyle {
		border-bottom: 1px solid #ff0000 !important;
	}

</style>